<template>
    <div class="login-page">
      <div class="form">
        <el-card class="form-card">
          <h1>后台管理系统</h1>

          <a class="form-register" href="#/register">去注册</a>
          <!-- <el-button>去登录</el-button> -->
          <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
            <el-form-item label="用户名" label-position="top" prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-position="top" prop="password">
              <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
  // data
  data () {
    return {
      loginForm: {
        username: 'lidongxu01',
        password: '666666'
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-z]{1,}[0-9]{1,}$/, message: '用户名起码一个字母或数字', trigger: 'blur' },
          { min: 2, max: 10, message: '用户名在2~10个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '用户名在6~15个字符之间', trigger: 'blur' }
        ]
      }

    }
  },
  // methods
  methods: {
    login () {
      this.$refs.loginForm.validate((isOk) => {
        if (isOk) {
          this.$store.dispatch('user/login', this.loginForm)
          Message({ type: 'success', message: '登录成功' })
          this.$router.push('/home')
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .form{
    display: flex;
    justify-content: center;
    position: relative;
    width: 540px;
    height: 580px;
    margin: 230px auto;
    // background-color: skyblue;
    .form-card{
      display: flex;
      justify-content: center;
      // flex-direction: column;
      width: 100%;
      height: 100%;
      h1{
        text-align: center;
      }

      .form-register{
        margin-left: 45%;
        text-decoration: none;
        text-align: center;
        font-size: 16px;
        color: blue;
        line-height: 24px;
        font-weight: 400;

      }
      .form-register:hover{
        color: #4F81FF;
      }
      .el-input{
        width: 420px;
        height: 48px;
      }

      .el-button{
        background: #4F81FF;
        color: #FFFFFF;
        width: 420px;
        height: 48px;
        border-radius: 4px;
      }
      .el-button:hover{
        background: #608DFF;
      }
    }
  }

</style>
